<template>
	<!-- 查看生平 -->
	<view class="viewlifehistory">
		<view class="viewlifehistory_top" :style="'background-image: url('+photo_cdn+'zpupload/20240103/2160ef7d0060cb5cff.png);'"></view>
		<view class="viewlifehistory_main">
			<view class="already_sculpture" v-if="clan_info.photo">
				<view class="img_box">
					<image class="alaready_img" :src="photo_cdn+clan_info.photo" mode="aspectFill" ></image>
				</view>
				<image v-if="!revise" @tap.stop="deleteimg" class="alaready_delete" :src="photo_cdn + 'zpupload/static/img/delicons.png'"></image>
			</view>
			<view v-else class="upload_sculpture" @tap="uploadimg">
				<view v-if="!revise" class="shulines"></view>
				<view v-if="!revise" class="henglines"></view>
			</view>
			<view class="lifemain_row">
				<view class="lifemain_row_item">
					<view class="lifemain_row_num">0</view>
					<view class="lifemain_row_text">帖子</view>
				</view>
				<view class="lifemain_row_item">
					<view class="lifemain_row_num">0</view>
					<view class="lifemain_row_text">粉丝</view>
				</view>
				<view class="lifemain_row_item">
					<view class="lifemain_row_num">0</view>
					<view class="lifemain_row_text">关注</view>
				</view>
			</view>
			
			<view class="lifemiddle">
				<view class="lifename">{{clan_info.surname}}{{clan_info.firstname}}</view>
				<view v-if="clan_info.ext0===1" class="lifemark">纪念</view>
			</view>
			
			<view class="life_nav">
				<view class="lifenav_item" v-for="(item,index) in lifenav" :key="index" :class="{active:life_id==item.id}" @tap="cutlife(item.id)">{{item.name}}</view>
			</view>
			
			<!-- 行传 -->
			<view class="life_acts" v-if="life_id==1">	
				<view class="life_acts_item">
					<view class="lable_names">姓氏：</view>
					<input class="lable_input_tag" v-model="clan_info.surname" :disabled="revise" type="text" value=""></input>
				</view>
				<view class="life_acts_item">
					<view class="lable_names">名字：</view>
					<input class="lable_input_tag" v-model="clan_info.firstname" :disabled="revise" type="text" value=""></input>
				</view>
					
				<view class="life_acts_item" @tap="getuserxb">
					<view class="lable_names">性别：</view>
					<view class="lable_input_tag" v-if="clan_info.sex===1">男</view>
					<view class="lable_input_tag" v-else-if="clan_info.sex===2">女</view>
					<view class="lable_input_tag hdcolor" v-else>请选择性别</view>
				</view>				
				<picker v-if="!revise" @change="bindPickerChange" :value="suite" :range="inferiority">	
					<view class="life_acts_item">
						<view class="lable_names">字辈：</view>
						<input class="lable_input_tag" :disabled="true" v-model="clan_info.ext5" type="text" value="" ></input>
					</view>	
				</picker>			
				<view class="life_acts_item" v-if="revise">
					<view class="lable_names">字辈：</view>
					<input class="lable_input_tag" :disabled="true" v-model="clan_info.ext5" type="text" value="" ></input>
				</view>		
						
		
				<view class="life_acts_item" >
					<view class="lable_names">世代：</view>
					<input class="lable_input_tag"  :disabled="revise"  v-model="clan_info.level" type="text" value="" ></input>
				</view>	
				
				<view class="life_acts_item">
					<view class="lable_names">谱名：</view>
					<input class="lable_input_tag" v-model="clan_info.ext8" type="text" value="" :disabled="revise" ></input>
				</view>
				
				<view class="life_acts_item" v-if="sex_type==1">
					<view class="lable_names">排行：</view>
					<input class="lable_input_tag" v-model="clan_info.ranking" type="number" value="" :disabled="revise" ></input>
				</view>
				
				<view class="life_acts_item">
					<view class="lable_names">生于：</view>
					<input :disabled="revise" v-model="clan_info.ext1" class="lable_input_tag" type="text" value=""></input>
				</view>
				
				<view class="life_acts_item">
					<view class="lable_names">出生地：</view>
					<input class="lable_input_tag" type="text" v-model="trueAddr" value="" :disabled="revise"></input>
				</view>
				
				<view class="life_acts_item" @tap="select_zai">
					<view class="lable_names">在世：</view>
					<view class="lable_input_tag" v-if="clan_info.ext0===0">是</view>
					<view class="lable_input_tag" v-else-if="clan_info.ext0===1">否</view>
					<view class="lable_input_tag hdcolor" v-else>请选择在世情况</view>
				</view>
				
				<view class="life_acts_item" v-if="clan_info.ext0===1">
					<view class="lable_names">逝于：</view>
					<input :disabled="revise" v-model="clan_info.ext2" class="lable_input_tag" type="text" value=""></input>
				</view>
				
				<view class="life_acts_item" v-if="clan_info.ext0===1">
					<view class="lable_names">安息地：</view>
					<input class="lable_input_tag" type="text" v-model="clan_info.sleep_place" :disabled="revise" value=""></input>
				</view>
			</view>
			
			<!-- 简介 -->
			<view v-if="life_id==2">
				<view class="intro_box">
					<view class="intro_title">个人介绍</view>
					<textarea v-if="clan_info.ext3" class="lable_textarea_tag" v-model="clan_info.ext3" :disabled="revise" maxlength="-1"></textarea>
					<textarea v-else-if="!revise" class="lable_textarea_tag" v-model="clan_info.ext3" :disabled="revise" maxlength="-1"></textarea>
					<view v-else class="intro_none">暂无介绍...</view>
				</view>
				
				<view class="intro_box">
					<view class="intro_title">教育经历</view>
					<view class="exper_box">
						<view class="edu_info" v-if="clan_info.ext6.length" v-for="(item,index) in clan_info.ext6" :key="index" @tap="toschool(index)">
							<view>
								<view class="edu_info_title">{{item.school}}</view>
								<view class="flex">
									<view class="edu_info_txt">{{item.education}}</view>
									<view v-if="item.major" class="edu_info_txt">{{item.major}}</view>
									<view class="edu_info_txt">{{item.time}} 入学</view>
								</view>
							</view>
							<image class="eduimg" :src="photo_cdn + 'zpupload/static/user/jiantoua.png'" mode="heightFix"></image>
						</view>
						<navigator v-if="!revise" url="/pages/mine/myschool/myschool" hover-class="none" class="exper_btn">添加学校</navigator>
					</view>
					<view v-if="!clan_info.ext6.length&&revise" class="intro_none">暂无介绍...</view>
				</view>
				
				<view class="intro_box">
					<view class="intro_title">工作经历</view>
					<view class="exper_box">
						<view class="edu_info" v-if="clan_info.ext7.length" v-for="(item,index) in clan_info.ext7" :key="index" @tap="towork(index)">
							<view>
								<view class="edu_info_title">{{item.company}}</view>
								<view class="flex">
									<view class="edu_info_txt">{{item.job}}</view>									
									<view class="edu_info_txt">{{item.time}}</view>
								</view>
							</view>
							<image class="eduimg" :src="photo_cdn + 'zpupload/static/user/jiantoua.png'" mode="heightFix"></image>
						</view>
						<navigator v-if="!revise" url="/pages/mine/addcompany/addcompany" hover-class="none" class="exper_btn">添加单位</navigator>
					</view>
					<view v-if="!clan_info.ext7.length&&revise" class="intro_none">暂无介绍...</view>
				</view>	
			</view>
			
			<!-- 生平事迹 -->
			<view v-if="life_id==3">
				<textarea v-if="clan_info.ext4" class="intro_textarea_tag" v-model="clan_info.ext4" :disabled="revise" maxlength="-1"></textarea>
				<textarea v-else-if="!revise" class="intro_textarea_tag" v-model="clan_info.ext4" :disabled="revise" maxlength="-1"></textarea>
				<view v-else>
					<view class="nointro" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20240104/2e0bf32ff2353973f5.png)'}"></view>
					<view class="intro_no">暂无介绍...</view>
				</view>		
			</view>
			
		</view>
		
			
		<w-picker
		    mode="date" 
		    startYear="100"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm1" 
		    ref="picker1" 
		    themeColor="#5771FF"
		></w-picker>
		<w-picker
		    mode="date" 
		    startYear="100"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm2" 
		    ref="picker2" 
		    themeColor="#5771FF"
		></w-picker>
		<!-- 选时间组件 -->
		
		<!-- <view v-if="revise&&identity_types>0" class="sub_footbtn" @tap="toOpen">
			<view class="sub_button">编辑</view>
		</view> -->
		<view v-if="!revise&&identity_types>=0" class="sub_footbtn" @tap="toRevise">
			<view class="sub_button">提交矫正</view>
		</view>
	</view>
</template>

<script>
	import {mapActions} from "vuex";
	import {getUserinfo} from "@/utils/api/api.js";
	import wPicker from "@/components/w-picker/w-picker.vue";//下拉选择组件
	import lpicker from "@/components/lpicker/lpicker.vue";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn,uploadFile} = config.baseUrl;
	import {familyPeopleInfo,getAddrInfo,updateFamilyPeople,genealogyList} from "@/utils/api/zupu.js"
	export default {
		components:{
			lpicker,
			wPicker,
		},
		data() {
			return {
				userInfo:{},
				
				staticurl,
				photo_cdn,
				edit:'',//为1时是点击编辑资料进来的
				identity_types:'',//0 普通用户  1 读写权限人  2 创建人
				sex_type:'',//1是本人 2是配偶
				type:'',//查到重复的进来编辑
				revise:true,//修改
				family_tree_id:-1,
				clan_info:{
					surname:'',//姓
					firstname:'',//名
					sex:"",//1男  2女	
					ext0:"",//是否在世 0 是   1 否
					ext1:"",//出生日期
					ext2:'',//辞世时间
					ext3:'',//个人简介
					ext4:'',//生平事迹
					ext5:'',//字辈
					ext6:[],//教育经历
					ext7:[],//工作经历
					ext8:'',//谱名
					photo:"",//照片
					ranking:'',//排行
					province_id:"",//省id
					city_id:"",//市id
					area_id:"",//区县id
					town_id:"",//街道id
					village_id:"",//村管委会
					prefix:"",//称谓
					sleep_place:'',//安息地
					level:''
				},
				lifenav:[
					{
						name:'行传',
						id:1
					},
					{
						name:'简介',
						id:2
					},
					{
						name:'生平事迹',
						id:3
					},
					{
						name:'朋友圈',
						id:4
					}
				],
				life_id:1,
				people_id:'',//族员id
				family_id:'',//族谱id
				imuser_id:'',
				user_id:'',
				trueAddr:"",//祖籍文字
				defaultVal1:[],
				selectList1:[],
				inferiority:[],//字辈
				suite:0
			};
		},
		onLoad(option){
			this.family_tree_id = option.family_tree_id?option.family_tree_id:-1;
			this.people_id = option.people_id?option.people_id:'';
			this.operate_name = option.operate_name?option.operate_name:'';
			this.family_id = option.family_id?option.family_id:'';
			this.identity_types = option.identity_types?option.identity_types:'';
			this.type = option.type?option.type:'';
			this.sex_type = option.sex_type?option.sex_type:'';
			this.edit = option.edit?option.edit:0;
			this.familyPeopleInfofun();
			let navtitle = "查看生平";
			if(this.operate_name&&this.type!=1&&this.edit!=1){
				navtitle = `查看『${this.operate_name}』的生平`;
			}else if(this.operate_name&&this.type==1&&this.edit!=1){
				navtitle = `编辑『${this.operate_name}』的生平`;
				this.revise = false;
			}
			if(this.edit==1){
				navtitle = `编辑『${this.operate_name}』的资料`;
				this.toOpen();
			}
			uni.setNavigationBarTitle({
				title:navtitle,
			})
			this.genealogyListfun();
			
			this.getUserinfofun();
		},
		onShow(){
			this.clan_info.ext6 = uni.getStorageSync("educational");//教育经历
			this.clan_info.ext7 = uni.getStorageSync("work_experience");//教育经历
			console.log(uni.getStorageSync("work_experience"),'1111')
		},
		onUnload(){
			uni.removeStorageSync('educational');
			uni.removeStorageSync('work_experience');
		},
		methods:{
			...mapActions(['ModifyItemData']),
			getUserinfofun() {
				getUserinfo({
			
				}).then((res) => {
					this.userInfo = res.data.userinfo;
				})
			},
			showpicker1(){
				if(this.revise){
					return false;
				}	
				this.$refs.picker1.show();	
			},
			showpicker2(){
				if(this.revise){
					return false;
				}				
				this.$refs.picker2.show();			
			},
			//日期选择点击后 重置表格
			onConfirm1(e){
				this.clan_info.ext1 = e.result;
			},
			onConfirm2(e){
				this.clan_info.ext2 = e.result;
			},
			//切换
			cutlife(id){
				if(this.life_id==id&&this.life_id!=4){
					return false
				}
				this.life_id = id;
				if(this.life_id==4){
					this.to_friend();
				}
			},
			//选择性别
			getuserxb(){
				if(this.revise){
					return false;
				}
				uni.showActionSheet({
					itemList: ['男','女'],
					success:  (res)=> {
						if(res.tapIndex==0){
							this.clan_info.sex = 1;
						}else if(res.tapIndex==1){
							this.clan_info.sex = 2;
						}
					},
					fail:  (res)=> {
						console.log(res.errMsg);
					}
				});	
			},
			//选择是否辞世
			select_zai(){
				if(this.revise){
					return false
				}
				if(this.clan_info.ext0==1 && this.userInfo.is_shaikh!=1){//允许不在的改成在的
					this.$api.msg("去世状态不可以修改~");
					return false;
				}
				uni.showActionSheet({
					itemList: ['是','否'],
					success:  (res)=> {
						if(res.tapIndex==0){
							this.clan_info.ext0 = 0;
						}else if(res.tapIndex==1){
							this.clan_info.ext0 = 1;
						}
					},
					fail:  (res)=> {
						console.log(res.errMsg);
					}
				});
			},
			//清楚选中的五级地址数据
			clearelech(e){
				this.clan_info.province_id = "";
				this.clan_info.city_id = "";
				this.clan_info.area_id = "";
				this.clan_info.town_id = "";
				this.clan_info.village_id = "";
			},
			//监听五级地址选中
			lpicker_select(e){
				this.clan_info.province_id = e.province_id;
				this.clan_info.city_id = e.city_id;
				this.clan_info.area_id = e.area_id;
				this.clan_info.town_id = e.town_id;
				this.clan_info.village_id = e.village_id;
			},
			//上传图片
			uploadimg(){
				if(this.revise){
					return false;
				}
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					success: (e) => {
						uni.uploadFile({
						    url: uploadFile, 
						    filePath: e.tempFilePaths[0],
						    name: 'file',
							header:{
								'token':uni.getStorageSync("token"),
							},
						    formData: {
						       "Content-Type": "multipart/form-data",
						       water: 0
						    },
						    success: (res) => {
								let {data} = JSON.parse(res.data)
								console.log('多选',data);
								this.clan_info.photo = data.url;	
						    },
							fail: (err) => {
								this.$api.msg("上传图片失败");
							}
						});
					}
				});
			},
			//清除照片
			deleteimg(){
				this.clan_info.photo = ''
			},
			//查看生平
			familyPeopleInfofun(){
				familyPeopleInfo({
					people_id:this.people_id
				}).then((res)=>{
					if(res.code==1){
						for(var i in this.clan_info){
							this.clan_info[i] = res.data[i];
						}
						this.imuser_id = res.data.fastim_id;
						this.user_id = res.data.user_id;
						uni.setStorageSync("educational",this.clan_info.ext6);
						uni.setStorageSync("work_experience",this.clan_info.ext7);
						this.analysisfun()
					}
				})
			},
			//解析省市区的文字
			analysisfun(){
				let search_id = "",search_type = "";
				if(this.clan_info.area_id){
					search_id = this.clan_info.area_id;
					search_type = 3;
				}
				if(this.clan_info.town_id){
					search_id = this.clan_info.town_id;
					search_type = 2;
				}
				if(this.clan_info.village_id){
					search_id = this.clan_info.village_id;
					search_type = 1;
				}
				getAddrInfo({
					ID:search_id,
					type:search_type,
				}).then((res)=>{
					if(res.code==1){
						let trueAddr = "";
						if(!res.data){
							return false;
						}
						if(res.data.area){
							trueAddr+= res.data.area.MergerName;
						}
						if(res.data.town){
							trueAddr+= res.data.town.name;
						}
						if(res.data.village){
							trueAddr+= res.data.village.name;
						}
						this.trueAddr = trueAddr;
					}
				})
			},
			//开启编辑
			toOpen(){
				this.revise = false;
				
				if(this.operate_name){
					let navtitle = `编辑『${this.operate_name}』的生平`;
					uni.setNavigationBarTitle({
						title:navtitle,
					})
				}
				setTimeout(()=>{
					this.$api.msg("您现在可以编辑信息了")
				},500)				
			},
			//提交修改信息
			async toRevise(){
				console.log(this.family_tree_id,'this.family_tree_id')
				let res = await updateFamilyPeople({
					...this.clan_info,
					family_id:this.family_id,
					people_id:this.people_id
				})
				if(res.code==1){
					this.$api.msg(res.msg);
					console.log(this.family_id,this.family_tree_id)
					await this.ModifyItemData({family_id:this.family_id,family_tree_id:this.family_tree_id,more_item:{id:this.family_tree_id}});
					setTimeout(()=>{
						uni.navigateBack()
					},1000)	
				}else{
					this.$api.msg(res.msg);
				}
			},
			//获取字辈
			genealogyListfun(){
				genealogyList({
					family_id:Number(this.family_id),
					people_id:Number(this.people_id),
					type:0
				}).then(res=>{
					this.inferiority = res.data.genealogyArr;	
				})
			},
			//选择字辈
			bindPickerChange: function(e) {
			    this.clan_info.ext5 = this.inferiority[e.detail.value];
				console.log(this.clan_info.ext5)
			},
			//查看朋友圈
			to_friend(){
				if(!this.user_id){
					this.$api.msg('该用户暂无朋友圈~')
					return false;
				}
				uni.navigateTo({
					url:`/pages/circle/mycircle/mycirlce?imuser_id=${this.imuser_id}`
				})
			},
			//修改学校信息
			toschool(index){
				if(this.revise){
					return false;
				}
				uni.navigateTo({
					url:`/pages/mine/myschool/myschool?index=${index}`
				})
			},
			towork(index){
				if(this.revise){
					return false;
				}
				uni.navigateTo({
					url:`/pages/mine/addcompany/addcompany?index=${index}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./viewlifehistory.scss";
</style>
